<template>
  <page-header-wrapper>
    <msg-details v-if="details.id" :detail="details.data" @back="handlBack"></msg-details>
    <a-card :bordered="false" v-else>
      <div class="table-page-search-wrapper"></div>
      <div class="table-operator">
        <a-button type="primary" @click="handleAll" :loading="btnStatus">全部已读</a-button>
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="handleRead"><a-icon type="delete" />已读</a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /> </a-button>
        </a-dropdown>
      </div>
      <!-- :row-selection="rowSelection" -->
      <s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData" showPagination="auto">
        <span slot="atitle" slot-scope="text, record">
          <div class="msg-title" @click="handleClickRow(record)">
            <span v-if="record.isRead == 1">{{ text }}</span>
            <a-badge v-else color="red" :text="text" />
          </div>
        </span>
        <span slot="content" slot-scope="text">
          <div class="remark-wrap ellipsis1">
            {{ text }}
          </div>
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="handleClickRow(record)">查看</a>
          
          
          <span v-if="(record.jumpType == 2 || record.jumpType == 3) && record.opStatus == 0" >
            <a-divider type="vertical" />
            <a @click="handleMsgLevel(record)" v-if="record.jumpType == 2">升级</a>
            <a @click="handleMsgLevel(record)" v-if="record.jumpType == 3">降级</a>
            <a-divider type="vertical" />
            <a @click="handleMsgPass(record)" >忽略</a>
          </span>
          
          <!-- record -->
        </span>
        <span slot="type" slot-scope="text">
          <a-tag :color="text | statusFilter(typeList, 'status')">{{ text | statusFilter(typeList, 'name') }}</a-tag>
        </span>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import moment from 'moment'
import { getUserMsgList, userMsgRead, userMsgReadAll, userMsgUpdateLevel, userMsgPassOpStatus } from '@/api/login'
import { STable, Ellipsis } from '@/components'
import MsgDetails from './msgDetails.vue'
import { mapGetters } from 'vuex'
import cloneDeep from 'lodash.clonedeep'
import { msgTypeList } from '@/utils/other'

const columns = [

  {
    title: '标题',
    dataIndex: 'title',
    scopedSlots: { customRender: 'atitle' },
  },
  {
    title: '消息类型',
    dataIndex: 'type',
    scopedSlots: { customRender: 'type' },
    filters: msgTypeList.map(v=> {return { text: v.name, value: v.id }}),
    // onFilter: (value, record) => record.name.includes(value),
    filterMultiple:false,
  },
  {
    title: '时间',
    dataIndex: 'addTime',
    key: 'addTime',
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
  },
  //   scopedSlots: { customRender: 'action' },
]

// const typeList = [
//    {
//      id:1,
//     status: '#2db7f5',
//     name: '系统消息',
//   },
// ]

export default {
  name: 'TableList',
  components: {
    STable,
    Ellipsis,
    MsgDetails,
  },
  data() {
    this.columns = columns
    return {
      id: null,
      // create model
      visible: false,
      confirmLoading: false,
      mdl: null,
      typeList: msgTypeList,
      btnStatus:false,
      role: {
        visible: false,
        mdl: null,
        confirmLoading: false,
        role: [],
      },
      allRole: [],
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      parameter: {
        pageNum: 1,
        pageSize: 10,
      },
      queryParam: {},
      data: [],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        if(requestParameters.type){
          requestParameters.type = requestParameters.type[0]
        }
        return getUserMsgList(requestParameters).then((res) => {
          let result = {
            data: res.data.data,
            pageNo: parameter.pageNo,
            pageSize: parameter.pageSize,
            totalCount: res.data.total,
            totalPage: res.data.pages,
          }
          return result
        })
      },
      selectedRowKeys: [],
      selectedRows: [],
      details: {
        id: null,
        data: {},
      },
    }
  },
  created() {},
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange,
        getCheckboxProps: record => ({
          props: {
            disabled: record.isRead === 1, // Column configuration not to be checked
            name: record.name,
          },
        }),
      }
    },
    ...mapGetters({
      'userInfo':'userInfo'
    })
  },
  methods: {
    handleClickRow(a_record) {
      if (a_record.isRead == 0) {
        this.$store.dispatch('msgRead', { msgId: a_record.id }).then((res) => {
          this.details.id = a_record.id
          this.details.data = a_record
        })
      } else {
        this.details.id = a_record.id
        this.details.data = a_record
      }
    },
    handlBack() {
      this.details.id = null
      this.details.data = {}
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    handleRead(){
      this.rowSelection.selectedRowKeys.forEach(v=>{
        userMsgRead({msgId: v}).then(res=>{
          let userInfo = cloneDeep(this.userInfo)
          // this.$
        })
        .catch(err=>{

        })
      })
      
    },
    handleAll(){
      this.btnStatus = true
      let self = this;
      userMsgReadAll().then(res=>{
        self.$store.dispatch('reSetInfo', {unMsgNum:0}).then(()=>{
          self.$refs.table.refresh()
          self.$message.success('操作成功!')
        })
      }).catch(err=>{
        self.$message.success('操作失败!')
      }).finally(()=>{
        self.btnStatus = false
      })
    },
    handleMsgLevel(a_record){
      let self = this;
      userMsgUpdateLevel({ msgId: a_record.id })
      .then(res=>{
        self.$refs.table.refresh()
      })
    },
    handleMsgPass( a_record ){
      let self = this;
      userMsgPassOpStatus({ msgId: a_record.id })
      .then(res=>{
        self.$refs.table.refresh()
      })
    }
  },
}
</script>
<style lang="less" scoped>
.msg-title {
  cursor: pointer;
}
</style>